<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8"/>
	<title>div变色</title>
<style>
    #div1{
    	width:200px;height:200px;background: blue;
    }
</style>
<script>
    //分开设置
    /*
    function toRed(){
    	var oDiv = document.getElementById('div1');
    	oDiv.style.background = 'red';
    }
    function toYellow(){
    	var oDiv = document.getElementById('div1');
    	oDiv.style.background = 'yellow';
    }
    function toGreen(){
    	var oDiv = document.getElementById('div1');
    	oDiv.style.background = 'green';
    }
    */

   //把相同函数合并，写成一个函数，通过传入不同参数实现
   function setColor(color){
   	   var oDiv = document.getElementById('div1');
   	   oDiv.style.background = color;
   }



</script>
</head>
<body>
 
    <input type="button" value="变红"  onclick="setColor('red')"/>
    <input type="button" value="变黄"  onclick="setColor('yellow')"/>
    <input type="button" value="变绿"  onclick="setColor('green')"/>
    <div id="div1"></div>

</body>
</html>

















































